import React, { Component } from 'react'

import DividerItem from '@/components/DividerItem';
import ListCard from '@/components/ListCard';
import { DEVICE_INFO, ALARM_INFO, STATE_INFO, STATE_REST_INFO } from '../enum';
import { ListCardItem } from '@/components/ListCard/styled';
import Imgviewer from '@/components/ImgViewer';
import { Row, Col } from 'antd';

interface IDetails {
  id: string;
  areaName: String;
  address: String;
  fireName: String;
  deviceTypeName: String;
  stateName: String;
  pushTime: String;
  handleName: String;
  modeName: String;
  mode: number;
  userName: String;
  createTime: String;
  floorName: String;
  buildName: String;
  images: Array<string>;
}

interface P {
  data: IDetails;
}

interface S {

}

class Details extends Component<P, S> {

  render() {
    const { data } = this.props;

    const address = `
      ${data.buildName || ''}${data.floorName || ''}${data.areaName || ''}
      ${data.address || ''}
    `

    const device = DEVICE_INFO.map((item: any, index) => {
      return {
        name: `${item.name}：`,
        value: item.key === 'areaName' ? address : data[item.key]
      }
    });

    const alarm = ALARM_INFO.map((item, index) => {
      return {
        name: `${item.name}：`,
        value: data[item.key]
      }
    });

    const STATE = +data.mode === 2 ? STATE_REST_INFO : STATE_INFO;

    const state = STATE.map((item, index) => {
      return {
        name: `${item.name}：`,
        value: data[item.key]
      }
    });

    const Tmp = () => (
      <>
        <ListCard data={state} type="small" step={2} />
        <Row>
          <ListCardItem types="small" style={{ width: '155px' }} span={4}>处理照片：</ListCardItem>
          <Col span={19}>
            {
              Array.isArray(data.images) && data.images.map((v, ind) => (
                <Imgviewer key={ind} url={v} isThumb={true} thumbWidth="90px" thumbHeight="60px" margin='10px' />
              ))
            }
          </Col>
        </Row>
      </>
    )

    const Device = DividerItem({
      WrapperComponent: () => <ListCard data={device} type="small" step={2} />,
      icon: 'file-text', title: '设备信息', type: 'small', bordered: true
    });
    const Alarm = DividerItem({
      WrapperComponent: () => <ListCard data={alarm} type="small" step={2} />,
      icon: 'alert', title: '报警信息', type: 'small', bordered: true
    });
    const State = DividerItem({
      WrapperComponent: () => <Tmp />,
      icon: 'file-done', title: '处理信息', type: 'small', bordered: true
    });

    return (
      <div style={{ width: '100%', height: '100%' }}>
        <Device />
        <div style={{ height: '20px', width: '100%' }}></div>
        <Alarm />
        <div style={{ height: '20px', width: '100%' }}></div>
        <State />
      </div>
    )
  }
}

export default Details;